<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>简历</title>
<style>
body{
	font-size:14px;
	line-height:1.8;
	background:url("bg.jpg") no-repeat center top;
	font-family:"Microsoft YaHei", "微软雅黑";
}

#demo{
	width:500px;
	margin:30px auto;
	padding: 20px 30px;
	position:relative;
	background-color:#fff;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	box-shadow:0px 0px 0px 10px rgba(0,0,0, 0.2);
	-moz-box-shadow:0px 0px 0px 10px rgba(0,0,0, 0.2);
	-webkit-box-shadow:0px 0px 0px 10px rgba(0,0,0, 0.2);
}
#demo h1{
	color: #03F;
}
#demo h2{
	color: #03F;
}

#demo .tooltip{
	color:#03F;
	cursor:help;
}

.tooltip-box{
	display:block;
	background:#fff;
	line-height:1.6;
	border:1px solid #66CCFF;
	color:#333;
	padding:20px;
	font-size:12px;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	overflow:auto;
}

        #mycard img {
            float: left;
            width: 100px;
            height: 100px;
            padding: 10px;
        }

        #mycard p {
            float: left;
            width: 150px;
            padding: 0 10px;
        }
	
	
</style>
</head>

<body>
<div id="demo">
	<h1>简历</h1>
					<p>联系方式：18216027947 15547146856</p>
					<p>电子邮箱 1379845715@qq.com 18216027947@163.com</p>
					<p>求职意向：技术岗位 前端/运维/运维开发/安全</p>
		<h2>毕业院校</h2>
			<p><a class="tooltip" id="tooltip1">南华大学</a>（2014.9-2018.7）本科</p>
				<h3>在校获奖/活动经历</h3>
					<p>	&nbsp &nbsp&nbsp&nbsp参加安全团队<a class="tooltip" id="tooltip6">“forty-two”</a></p>
					<p>	&nbsp &nbsp&nbsp&nbsp获得蓝盾杯安全竞赛华中赛区优胜奖</p>
					<p>	&nbsp &nbsp&nbsp&nbsp制作<a class="tooltip" id="tooltip2">团队网站前端</a>，并协助团队举办ctf比赛</p>
					<p>	&nbsp &nbsp&nbsp&nbsp在校获得2017年二等奖学金 优秀干部</p>
					<p>	&nbsp &nbsp&nbsp&nbsp在校参加两个课题研究：漏洞检测自动平台（项目编号：2016NH040XJXZ，  省级）（参与），sdn网络下对ddos的防御(校级主持)</p>
					<p>	&nbsp &nbsp&nbsp&nbsp第四届全国大学生sdn大赛第45名</p>
					<p>	&nbsp &nbsp&nbsp&nbsp计算机软件著作权登记号：2018SR673286</p>
		<h2>技能/软件</h2>
					<p>&nbsp&nbsp熟悉python，有一定的开发经历，熟悉c，c++ </p>
					<p>&nbsp&nbsp熟悉linux操作，熟悉shall</p>
					<p>&nbsp&nbsp有使用flask diango开发web经验</p>
					<p>&nbsp&nbsp有一定<a class="tooltip" id="tooltip3">渗透经验</a></p>


   
   



</div>
<script>

    function addEvent(element, event, callbackFunction) {
        if (element.addEventListener) {
            element.addEventListener(event, callbackFunction, false);
        } else if (element.attachEvent) {
            element.attachEvent('on' + event, callbackFunction);
        }
    }

var toolTipBoxClass = "tooltip-box";

var isIE = navigator.userAgent.indexOf("MSIE") > -1;

var getEl = function(id){ 
    return document.getElementById(id);
}

var demo = getEl("demo");

//obj - ToolTip 超链接元素
//id - ToolTip提示框id
//html - ToolTip提示框HTML
//width - ToolTip提示框宽度（可选）
//height - ToolTip提示框高度（可选）
function showToolTip(obj, id, html, width, height){
	if(getEl(id)==null){ 
	    //创建 <div class="tooltip-box" id="xx">xxxxxx</div>
		var toolTipBox;
		toolTipBox = document.createElement("div");
		toolTipBox.className = toolTipBoxClass;
		toolTipBox.id = id;
		toolTipBox.innerHTML = html;
		obj.appendChild(toolTipBox);
		
		toolTipBox.style.width = width? width+"px":"auto";
		toolTipBox.style.height = height? height+"px":"auto";
		
		if(!width && isIE){ 
		    toolTipBox.style.width = toolTipBox.offsetWidth;
		}
		
		toolTipBox.style.position = "absolute";
		toolTipBox.style.display = "block";
		
		var left = obj.offsetLeft;
		var top = obj.offsetTop + 20;
		
		//left，不让ToolTip提示框超出浏览器
		if(left + toolTipBox.offsetWidth > document.body.clientWidth){ 
		    var demoLeft = demo.offsetLeft;
			left = document.body.clientWidth - toolTipBox.offsetWidth - demoLeft;
			if (left < 0) left = 0;
		}
		
		toolTipBox.style.left = left + "px";
		toolTipBox.style.top = top + "px";
		
		addEvent(obj,"mouseleave", function(){
			setTimeout(function(){
			    getEl(id).style.display = "none";
			}, 300);
		});
	}
	else{ 
	    //显示
		getEl(id).style.display = "block";
	}	
}

addEvent(demo, "mouseover", function(e){
	var event = e || window.event; 
	var target = event.target || event.srcElement;
	
	if(target.className == "tooltip"){ 
	
	    var _html;
		var _id;
		var _width = 200;
		
            switch (target.id) {
                case "tooltip1":
                    _id = "t1";
                    _html = "南华内蒙古第一批次";
                    break;
                case "tooltip2":
                    _id = "t2";
                    _html = "http://fomis.cn/";
                    break;
                case "tooltip3":
                    _id = "t3";
                    _html = "<p>为学校做过安全检查，了解sql注入，绕狗，漏洞挖掘，渗透测试</p>";
                    _width = 100;
                    break;
                case "tooltip4":
                    _id = "t4";
                    _html = '图片以后上';
                    _width = 520;
                    break;
                case "tooltip5":
                    _id = "t5";
                    _html = '没想好写啥';
                    _width = 300;
                    break;
                case "tooltip6":
                    _id = "t6";
                    _html = '<iframe src="http://www.imooc.com/" width="480" height="300"></iframe>';
                    _width = 500;
                    break;
                default:
                    return false;
            }

            showToolTip(target, _id, _html, _width);
	
	}

});

</script>
</body>
</html>
